<template>
  <div class="row" :style="{height: winHeight}" :class="{'q-pa-md': !winMaximized}">
    <q-layout container view="hHh Lpr lFf win" class="app-win shadow-8" :class="{'app-win-border': !winMaximized}">
      <q-header class="app-bar text-weight-light q-electron-drag">

        <q-bar class="app-toolbar">
          <q-avatar square size="22px" style="margin: 0px 6px 0px 4px">
            <img :src="img.logo">
          </q-avatar>

          <q-btn no-caps flat dense :ripple="false" class="app-menu-btn">
            {{ $t('menu.file') }}
            <q-menu class="app-menu" auto-close fit>
              <q-list style="min-width: 100px">
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subFile.newConnection') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subFile.disconnect') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator/>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subFile.exit') }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>
          <q-btn no-caps flat dense :ripple="false" class="app-menu-btn">
            {{ $t('menu.edit') }}
            <q-menu class="app-menu" auto-close fit>
              <q-list style="min-width: 100px">
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subEdit.undo') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subEdit.redo') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-separator/>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subEdit.cut') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subEdit.copy') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subEdit.paste') }}</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="onItemClick" class="app-menu-item">
                  <q-item-section>
                    <q-item-label>{{ $t('menu.subEdit.delete') }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-menu>

          </q-btn>
          <q-btn no-caps flat dense :ripple="false" class="app-menu-btn">{{ $t('menu.window') }}</q-btn>
          <q-btn no-caps flat dense :ripple="false" class="app-menu-btn">{{ $t('menu.help') }}</q-btn>

          <q-space/>

          <q-btn class="app-sys-btn" dense flat :ripple="false" icon="remove" @click="clickMinimize" />
          <q-btn class="app-sys-btn" dense flat :ripple="false" :icon="windowMaxRestore" @click="toggleMaximize" />
          <q-btn class="app-sys-btn app-btn-close" dense flat :ripple="false" icon="close" @click="clickQuit" />
        </q-bar>

        <q-separator/>
      </q-header>

      <q-drawer
        v-model="leftDrawerOpen"
        show-if-above
        bordered
        :width="54"
        :breakpoint="0"
        style="overflow: hidden"
        class="left-bar"
      >
        <div class="col">
          <q-tabs
            v-model="leftTab"
            :ripple="false"
            active-color="white"
            switch-indicator
            vertical
            indicator-color="cyan"
            class="app-tabs text-grey-5"
          >
            <q-tab :ripple="false" flat name="home" :icon="icon.home" label="" />
            <q-tab :ripple="false" flat name="database" :icon="icon.database" label="" />
            <q-tab :ripple="false" flat name="file" :icon="icon.script" label="" />
            <q-tab :ripple="false" flat name="dashboard" icon="dashboard" label="" />
          </q-tabs>
        </div>
      </q-drawer>
      <q-page-container >
        <q-page class="bg-dark row">
          <q-splitter
            class="col"
            v-model="splitterModel"
            unit="px"
            style="width: 100%;"
            before-class="overflow-hidden row"
            after-class="overflow-hidden row"
            separator-class="bg-gray-3"
          >
            <template v-slot:before>
              <q-tab-panels v-model="leftTab" class="navigator">
                <q-tab-panel name="home" class="row">
                    <NaviHome></NaviHome>
                </q-tab-panel>

                <q-tab-panel name="database">
                  <div class="text-h6">Database</div>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </q-tab-panel>

                <q-tab-panel name="file">
                  <div class="text-h6">File</div>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </q-tab-panel>

                <q-tab-panel name="dashboard">
                  <div class="text-h6">Dashboard</div>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                </q-tab-panel>

              </q-tab-panels>
            </template>

            <template v-slot:after>
<!--
              <div ref="editor" class="col app-container">
              </div>
-->
            </template>
          </q-splitter>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script>
import EssentialLink from 'components/EssentialLink.vue'
import Navigator from 'components/Navigator.vue'
import PagesTab from "components/PagesTab";
import NaviHome from 'components/NaviHome.vue'
import * as monaco from 'monaco-editor'

import {fasDatabase, fasChartPie, fasTerminal} from '@quasar/extras/fontawesome-v5'
import { mdiWindowMaximize, mdiWindowRestore, mdiLanguageLua, mdiHome, mdiDatabase, mdiFile, mdiScript } from '@quasar/extras/mdi-v5'

import logo from '../assets/redis-start-logo.png'
import addConnection from '../assets/image/add_connection.svg'
import addQuery from '../assets/image/add_query.svg'
import addTerminal from '../assets/image/add_terminal.svg'


import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'MainLayout',

  components: {
    Navigator,
    NaviHome,
    PagesTab,
    EssentialLink
  },

  data() {
    return {
      img: {
        logo: logo,
        addConnection: addConnection,
        addQuery: addQuery,
        addTerminal: addTerminal,
      },
      icon: {
        home: mdiHome,
        database: mdiDatabase,
        script: mdiScript
      },
      winHeight: (window.innerHeight) + 'px',
      winWidth: (window.innerWidth) + 'px',
      splitterModel: ref(260),
      rippleState: ref(false),
      leftTab: ref('home'),
      monacoEditor: { }
    }
  },

  created() {
    this.mdiLanguageLua = mdiLanguageLua
    this.fasDatabase = fasDatabase
    this.fasChartPie = fasChartPie
    this.iconTerminal = fasTerminal
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.winHeight = (window.innerHeight) + 'px';
      this.winWidth = (window.innerWidth) + 'px';
    })
    // 初始化编辑器，确保dom已经渲染，dialog中要写在opened中
/*
    this.monacoEditor = monaco.editor.create(this.$refs.editor, {
      value: '',
      readOnly: false,
      automaticLayout: true,
      language: 'lua',
      theme: 'vs-dark',
      acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
      acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart"
      autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
      autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
      autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
      autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
      roundedSelection: false, // 选区是否有圆角
      scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
      minimap: {
        enabled: false
      }
    });
*/
  },

  methods: {
    changeEditor() { // 更改editor内容
      this.monacoEditor.setValue(result.data);
      this.monacoEditor.getAction('editor.action.formatDocument')._run();
    },
    destroyEditor() { // 销毁编辑器
      this.monacoEditor.dispose();
    }
  },

  computed: {
    windowMaxRestore() {
      if (this.winMaximized) {
        return mdiWindowRestore
      }
      return 'crop_square'
    }
  },

  setup () {
    const leftDrawerOpen = ref(false)
    const winMaximized = ref(false)

      return {
        leftDrawerOpen,
        winMaximized,
        toggleLeftDrawer () {
          leftDrawerOpen.value = !leftDrawerOpen.value
        },
        clickMinimize() {
          window.electronApi.minimize()
        },
        toggleMaximize() {
          winMaximized.value = !winMaximized.value
          window.electronApi.toggleMaximize()
        },
        clickQuit() {
          window.electronApi.close()
        },
        openNewConnectionWindow() {
          window.electronApi.openNewConnectionWindow()
        }
    }
  }
})
</script>
